<template>
    <div class="setting-box-item">
            <div class="setting-box-item-label">
            <el-tooltip v-if="tip" :content="tip" placement="top">
               <span>{{ label }}</span>
            </el-tooltip> 
            <span v-else class="label">{{ label }}</span>
            </div>
       <div class="setting-box-item-content">
         <slot />
       </div>
    </div>
</template>

<script lang="ts" setup>
defineOptions({
    name: 'SettingBoxItem'
});

defineProps({
    label: {
        type: String,
        required: true
    },
    tip: {
        type: String,
    }
})
</script>

<style lang="scss" scoped>
.setting-box-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 15px;
}
.setting-box-item-label {
    flex: 1;
    
    span {
        font-size: 12px;
        color: #666;
        text-decoration: underline dashed;
        cursor: help;
    }

    .label {
        text-decoration: underline dashed;
        cursor: default;
    }
    
}
.setting-box-item-content {
    flex: 2.2;
}
</style>